{% extends 'base.html' %}
{% load staticfiles %}
{% block css %}
    <link href="{% static 'plugins/datetimepicker/css/bootstrap-datetimepicker.min.css' %}" rel="stylesheet" media="screen">
{% endblock %}
{% block js %}
    <script src="{% static 'plugins/datetimepicker/js/bootstrap-datetimepicker.min.js' %}"></script>
    <script src="{% static 'js/jquery.form.js' %}"></script>
    <script src="{% static 'plugins/echarts/echarts.js'%}"></script>
    <script >
        $('.form_datetime').datetimepicker({
            showMeridian: true,
            autoclose: true,
            todayBtn: true,
            pickerPosition: 'bottom-left'
        });

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '车场收入统计曲线图',
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: {{ parking_list|safe }},
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    //magicType: {type: ['line', 'bar']},
                    //restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: {{ day_list|safe }}
            },
            yAxis: {
                type: 'value'
            },
            series: {{ series_list|safe }}
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
{% endblock %}
{% block content %}
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        报表统计
      </h1>
      <ol class="breadcrumb">
        <li><i class="fa fa-dashboard"></i> 报表统计</li>
        <li class="active">车场收入</li>
      </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="box box-primary">
          <div class="box-header with-border">
            <h3 class="box-title">查询条件</h3>
            <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            </div><!-- /.box-tools -->
          </div><!-- /.box-header -->
          <div class="box-body">
            <div class="form-group">
                <label for="subtext" class="col-sm-1 control-label">开始时间</label>
                <div class="col-sm-3 ">
                    <div class="input-group date form_datetime pl15" >
                        <input class="form-control" id="start_time" name="start_time" size="16" type="text">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                    </div>
                </div>
                <label for="subtext" class="col-sm-1 control-label">结束时间</label>
                <div class="col-sm-3">
                    <div class="input-group date form_datetime pl15" >
                        <input class="form-control" id="end_time" name="end_time" size="16" type="text">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                    </div>
                </div>
                <div class="col-sm-3">
                    <button class="btn btn-sm btn-primary"><i class="fa fa-search"></i> 查询</button>
                    <button class="btn btn-sm btn-primary "><i class="fa fa-undo"></i> 重置 </button>
                </div>
            </div>
          </div>
        </div>

        <div class="box box-primary">
          <div class="box-header with-border">
            <h3 class="box-title">报表展示</h3>
            <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            </div><!-- /.box-tools -->
          </div><!-- /.box-header -->
          <div class="box-body">
            <div id="main" style="height:400px;"></div>
          </div><!-- /.box-body -->
        </div><!-- /.box -->
    </section>
    <!-- /.content -->
  </div>

{% endblock %}